<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: htang
 * @Date: 2023-11-08 16:32:27
 * @LastEditors: htang
 * @LastEditTime: 2024-03-08 18:06:44
-->
<template>
  <div class="large-screen-amap-layer">
    <div class="left-node">
      <!-- <Entrance /> -->
      <LeftEcharts ref="leftEcharts" />
      <AlartEcharts />
      <alartRanking />
    </div>
    <div class="center-node flex justify-between">
      <CenterAccess />
      <CenterEntrance />
    </div>
    <div class="right-node">
      <RightEcharts ref="rightEcharts" />
      <WorkOrderStatis />
      <EventTypeEcharts />
    </div>
    <div id="large-screen-map"></div>
    <DetailModal ref="detailModal" />
  </div>
</template>

<script>
import { ref, onMounted, getCurrentInstance, defineComponent, onUnmounted, nextTick } from 'vue';
import LeftEcharts from './left/station-echarts.vue';
import alartRanking from './left/alart-ranking.vue';
import Entrance from './left/entrance.vue';
import RightEcharts from './right/station-echarts.vue';
import EventTypeEcharts from './right/event-type-echarts.vue';
import AlartEcharts from './left/alart-echarts.vue';
import WorkOrderStatis from './right/work-order-statis.vue';
import CenterAccess from './center/access.vue';
import CenterEntrance from './center/entrance.vue';
import DetailModal from './detail.vue';
import { stationListApi } from '/@/api/station';
import * as turf from '@turf/turf';
import ajax from '@/utils/request-oss-xml.js';
let markerArray = [];
export default defineComponent({
  components: {
    DetailModal,
    LeftEcharts,
    RightEcharts,
    EventTypeEcharts,
    AlartEcharts,
    alartRanking,
    WorkOrderStatis,
    Entrance,
    CenterAccess,
    CenterEntrance,
  },
  setup() {
    let { proxy } = getCurrentInstance();

    let amap = null;

    /**
     * 初始化地图
     */
    function initMap() {
      amap = new AMap.Map('large-screen-map', {
        resizeEnable: true,
        rotateEnable: true,
        pitchEnable: true,
        //地图中心点
        center: [113.29, 22.81],
        //地图显示的缩放级别
        zoom: 14,
        // zooms: [10, 12],
        pitch: 1,
        // 选装
        rotation: 0,
      });
      // amap.on('click', (e) => {
      //   proxy.$refs.detailModal.visible = true;
      // });
    }

    /**
     * 设置顺德边界
     */
    function initShundePolygon() {
      Promise.all([
        ajax.get({ path: 'beijiao.json' }),
        ajax.get({ path: 'chencun.json' }),
        ajax.get({ path: 'daliang.json' }),
        ajax.get({ path: 'junan.json' }),
        ajax.get({ path: 'lecong.json' }),
        ajax.get({ path: 'leliu.json' }),
        ajax.get({ path: 'longjiang.json' }),
        ajax.get({ path: 'lunjiao.json' }),
        ajax.get({ path: 'ronggui.json' }),
        ajax.get({ path: 'xingtan.json' }),
      ]).then((res) => {
        let m = res;
        for (let i = 0; i < m.length; i++) {
          let coordinates = m[i].coordinates;
          let polygons = [];
          amap.remove(polygons);
          for (let i = 0; i < coordinates.length; i++) {
            let polygon = new AMap.Polygon({
              path: coordinates[i],
              strokeWeight: 3,
              fillColor: '',
              fillOpacity: 0.4,
              strokeColor: '#039567',
              strokeOpacity: 0.85,
            })
              .on('mousemove', (e) => {
                polygon.setOptions({
                  strokeStyle: 'solid',
                  strokeColor: '#039567',
                });
              })
              .on('mouseout', (e) => {
                polygon.setOptions({
                  strokeStyle: 'dashed',
                  strokeColor: '#039567',
                });
              });
            amap.add(polygon);
            polygons.push(polygon);
          }
        }
      });
    }

    /**
     * 初始化站点列表
     */
    function initStationList() {
      markerArray.map((_) => {
        amap.remove(_);
      });
      let points = [];
      stationListApi({}).then((list) => {
        for (let i = 0; i < list.length; i++) {
          let { name, longitue, latitude, state } = list[i];
          if (longitue > 0 && latitude > 0) {
            points.push(turf.point([longitue, latitude]));
          }
          let className = 'marker-status';
          switch (state) {
            case -1:
              className = 'marker-status-offline';
              break;
            case 0:
              className = 'marker-status-safang';
              break;
            case 1:
              className = 'marker-status-bufang';
              break;
            default:
              break;
          }
          if (longitue && latitude) {
            let marker = new AMap.Marker({
              position: new AMap.LngLat(longitue, latitude),
              title: name,
              ...list[i],
              offset: new AMap.Pixel(0, 0),
              // 自定义覆盖物
              content: '<div class="marker ' + className + '"></div>',
            });
            marker.setLabel({
              direction: 'right',
              // 设置文本标注偏移量
              offset: new AMap.Pixel(10, 0),
              // 设置文本标注内容
              content: `<div class='marker-info'>${name}</div>`,
              ...list[i],
            });
            marker.on('click', ({ target }) => {
              // let { _originOpts } = target;
              // onDetail(_originOpts);
            });
            markerArray.push(marker);
            amap.add(marker);
          }
        }
        if (points.length > 0) {
          let features = turf.featureCollection(points);
          let [lng, lat] = turf.center(features).geometry.coordinates;
          amap.setCenter([lng, lat]);
          amap.setZoom(11);
        }
      });
    }
    /**
     * 设置图层样式
     */
    function setMapStyle(v) {
      let styleName = 'amap://styles/' + v;
      amap.setMapStyle(styleName);
    }

    onMounted(() => {
      nextTick(() => {
        initMap();
        setMapStyle('darkblue');
        initStationList();
        // initShundePolygon();
      });
    });

    onUnmounted(() => {
      amap.destroy();
    });

    return {
      initMap,
    };
  },
});
</script>

<style lang="less" scoped>
.large-screen-amap-layer {
  position: relative;
  height: calc(100% - 105px);
  flex: 1;

  #large-screen-map {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    :deep(.marker) {
      position: relative;
      display: block;
      width: 18px;
      height: 18px;
      outline: none;
      box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
      border-radius: 100%;
      transform-origin: 0 0;
      opacity: 0.7;
      &.marker-status {
        background: blue;
      }
      &.marker-status-bufang {
        background: green;
      }
      &.marker-status-safang {
        background: red;
      }
      &.marker-status-offline {
        background: gray;
      }
    }
  }

  #large-screen-map {
    width: 100%;
    height: 100%;
  }
  .left-node,
  .right-node {
    position: absolute;
    top: 12px;
    width: 370px;
    display: flex;
    flex-direction: column;
    z-index: 1;
  }
  .left-node {
    left: 24px;
  }
  .center-node {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    width: calc(100% - 782px);
    height: 340px;
    margin: 0 auto;
    z-index: 10;
  }
  .right-node {
    right: 24px;
  }
}
</style>
